import QtQuick
import QtQuick.Layouts
import QtCharts

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true

    ChartView {
        id: chartView
        title: "CandlestickSeries Demo"
        titleFont.bold: true
        titleFont.pointSize: 14

        anchors.fill: parent
        antialiasing: true

        // 当使用 BarCategoryAxis 时，每个项目（CandlestickSet）会被绘制到它自己的类别中。
        BarCategoryAxis {
            id: barCategoryAxisX
            categories: ["11月1日", "11月2日", "11月3日", "11月4日", "11月5日"]
            titleText: "BarCategoryAxis"
        }

        // DateTimeAxis 和 ValueAxis可以作为BarCategoryAxis的替代方案。
        // 在这种情况下，每个蜡烛图项目会根据其时间戳值进行绘制。
        DateTimeAxis {
            id: dateTimeAxisX
            min: new Date(2025, 10, 3)
            max: new Date(2025, 10, 9)
            format: "yyyy-MM-dd"
            tickCount: 7
            titleText: "DateTimeAxis"
        }

        CandlestickSeries {
            id: candleSeries
            name: "CandlestickSeries"

            axisX: dateTimeAxisX
            increasingColor: "green"
            decreasingColor: "red"
            bodyWidth: 0.5

            CandlestickSet { timestamp: new Date(2025, 10, 4).getTime(); open: 690; high: 694; low: 599; close: 660 }
            CandlestickSet { timestamp: new Date(2025, 10, 5).getTime(); open: 669; high: 669; low: 669; close: 669 }
            CandlestickSet { timestamp: new Date(2025, 10, 6).getTime(); open: 485; high: 623; low: 485; close: 600 }
            CandlestickSet { timestamp: new Date(2025, 10, 7).getTime(); open: 589; high: 615; low: 377; close: 569 }
            CandlestickSet { timestamp: new Date(2025, 10, 8).getTime(); open: 464; high: 464; low: 254; close: 254 }

            // 交互功能：点击K线显示详细信息
            onClicked: function(candlestickSet) {
                var date_str = Qt.formatDateTime(new Date(candlestickSet.timestamp), "yyyy-MM-dd")
                console.log("Date: ", date_str)
                console.log(`open: ${candlestickSet.open}`);
                console.log(`close: ${candlestickSet.close}`);
                console.log(`high: ${candlestickSet.high}`);
                console.log(`low: ${candlestickSet.low}`);
            }
        }
    }
}
